<template>
    <div class="search">
        <!-- 顶部栏 -->
        <div class="top">
            <top-item></top-item>
        </div>

        <!-- 文本列表 -->
        <div class="tip">
            <span>你正在预览{{ city }}的天气信息，可以通过右上角的"+"号按钮保存起来</span>
        </div>
        <div class="content">
            <span>当日气温是: {{ temp }}摄氏度</span>
            <span>当日天气是: {{ curWeather }}</span>
            <span>当日风向是: {{ wind }}</span>
            <span>当日风力是: {{ windPower }}级</span>
        </div>

        <!-- 最近天气 -->
        <div class="rec-weather">
            <recent-weather></recent-weather>
        </div>
    </div>
</template>

<script setup>
import topItem from '../components/topItem.vue'
import RecentWeather from '../components/RecentWeather.vue'
import { useStore } from '../store/store';
import { useRoute } from 'vue-router';
import { codeWeather, getCode } from '../api';
import { ref } from 'vue';

const route = useRoute()
const city = route.params.city
const adCode = ref('')
const cityWeather = ref('')
// api相关
const temp = ref('')
const curWeather = ref('')
const wind = ref('')
const windPower = ref('')

// 获取城市编码
async function getAdcode() {
    adCode.value = await getCode(city, '7633c039e776357d868a4d0f4c7f0e9c')
    adCode.value = adCode.value.geocodes[0].adcode
}


// 获取天气
async function getWeather() {
    getAdcode()
    cityWeather.value = await codeWeather(adCode.value, '7633c039e776357d868a4d0f4c7f0e9c')
    temp.value = cityWeather.value.lives[0].temperature
    curWeather.value = cityWeather.value.lives[0].weather
    wind.value = cityWeather.value.lives[0].winddirection
    windPower.value = cityWeather.value.lives[0].windpower
}

// 主方法
async function mainFunc() {
    await getAdcode()
    await getWeather()
}

mainFunc()

</script>

<style scoped lang="scss">
.search {
    display: flex;
    width: 100%;
    min-height: 100vh;
    color: #fff;
    flex-direction: column;
    align-items: center;

    .top {
        width: 100%;
    }

    .tip {
        width: 100%;
        height: 30px;
        background: rgb(0, 78, 113);
        text-align: center;
        line-height: 30px;
        padding: 10px 0;
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        margin-bottom: -20px;
        gap: 20px;
    }
}
</style>
